<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<title>検証状況資料・設定</title>
<jsp:include page="../basePage/head.jsp" />
<style type="text/css">	
	#caseName{width:200px;}
	#rankID {width:150px}
	#dateField{width:120px} 
</style>
<script>
	$(function() {
		
		 
		 
		//设置默认日期 
		//开始日期：上个月 结束日期 当前日期
		var toDate = getCurrentDay();
		var fromDate =  getPriorMonthDay();
		
		//日期选择框格式化
 		$( "#dateFrom" ).datepicker({ dateFormat: 'yy-mm-dd'}).val(fromDate);
		$( "#dateTo" ).datepicker({ dateFormat: 'yy-mm-dd'}).val(toDate);
	 	
		 
					
	 	// 配置jqGrid组件  
    	var $gridTable=$("#gridTable").jqGrid({  
        	//url: "caseNumberQuery.action",  
        	datatype: "local",  //为local时初始化不加载，支持json，xml等   
        	mtype: "GET",  
        	height: 350,  
        	/* width: "100%", */
        	autowidth: true,  
        	colNames: ["id","受番ID","画像ID","帳票ID","帳票名称",
        	           "顧客ID","フィールドID","フィールド名称","项目ID","项目名称",
        	           "AOP","A結果","A付箋",
        	           "BOP","B結果","B付箋",
        	           "COP","C結果","C付箋",
        	           "DOP","D結果","D付箋",
        	           "EOP","E結果",
        	           "納品結果","納品付箋",
        	           "正解結果","正解付箋","審査",
        	           "指摘","ミス原因",
        	           "ミス種類","ミス字数",
        	           "画像","画像" ],
        	colModel: [  
				{name:"id",index:"ID"   },
				{name:"orderID",index:"orderID",width:180,sortable:true, align:"left", resizable:true   },
				{name:"imageID",index:"imageID",width:180,sortable:true, align:"left", resizable:true  },
				{name:"formID",index:"formID",width:60,sortable:true, align:"center",resizable:true},   
				{name:"formName",index:"formName",width:200,sortable:true, resizable:false, resizable:true} ,
				{name:"customerID",index:"customerID",width:100,sortable:true, align:"center", resizable:true},
				{name:"fieldID",index:"fieldID",width:60,sortable:true, align:"center", resizable:true},
				{name:"fieldName",index:"fieldName",width:100,sortable:true, resizable:false, resizable:true} ,
				{name:"categoryID",index:"categoryID",width:60,sortable:true,align:"center", resizable:true},
				{name:"categoryName",index:"categoryName",width:200,sortable:true, resizable:false, resizable:true} ,
				
				{name:"aOpID",index:"aOpID",width:60,sortable:true,align:"center", resizable:true},
				{name:"aResult",index:"aResult",width:300,sortable:true, resizable:false, resizable:true} ,
				{name:"aEntryCommentID",index:"aEntryCommentID",width:60,sortable:true,align:"center", resizable:true},
				
				{name:"bOpID",index:"bOpID",width:60,sortable:true, align:"center",resizable:true},
				{name:"bResult",index:"bResult",width:300,sortable:true, resizable:false, resizable:true} ,
				{name:"bEntryCommentID",index:"bEntryCommentID",width:60,sortable:true,align:"center", resizable:true},
				
				{name:"cOpID",index:"cOpID",width:60,sortable:true, align:"center",resizable:true},
				{name:"cResult",index:"cResult",width:300,sortable:true, resizable:false, resizable:true} ,
				{name:"cEntryCommentID",index:"cEntryCommentID",width:60,sortable:true,align:"center", resizable:true},
				
				{name:"dOpID",index:"dOpID",width:60,sortable:true, align:"center",resizable:true},
				{name:"dResult",index:"dResult",width:300,sortable:true, resizable:false, resizable:true} ,
				{name:"dEntryCommentID",index:"dEntryCommentID",width:60,sortable:true,align:"center", resizable:true},
				
				{name:"eOpID",index:"eOpID",width:60,sortable:true, align:"center",resizable:true},
				{name:"eResult",index:"eResult",width:40,sortable:true, resizable:false, resizable:true} ,
				
				{name:"finalResult",index:"finalResult",width:300,sortable:true, resizable:false, resizable:true,
					editable:true,editoptions:{rows:"6", cols:"60"},editrules:{required:true},formoptions:{},edittype:'textarea'} ,
					
				{name:"finalEntryCommentID",index:"finalEntryCommentID",width:60,sortable:true,align:"center", resizable:true,
					editable:true,editrules:{required:true},formoptions:{},edittype:'text'} ,
				
				{name:"correctEntryResult",index:"correctEntryResult",width:300,sortable:true, resizable:false, resizable:true,
					editable:true,editoptions:{rows:"6", cols:"60"},editrules:{required:true},formoptions:{},edittype:'textarea'} ,				
					
				{name:"correctCommentID",index:"correctCommentID",width:60,sortable:true, resizable:false, resizable:true,
						editable:true,editrules:{required:true},formoptions:{},edittype:'text'} ,	
					
				{name:"audit",index:"audit",width:40,sortable:true, resizable:false, resizable:true,
						editable:true,editrules:{required:true},formoptions:{},edittype:'checkbox'} ,
						
				{name:"verfityItemName",index:"verfityItemName",width:100,sortable:true, resizable:true},
				{name:"verfityComment",index:"verfityComment",width:60,sortable:true, resizable:true},
				
	            {name:"missType",index:"missType",width:120,sortable:true,  resizable:true},  
	            {name:"missWord",index:"missWorde",width:120,sortable:true, resizable:true}  ,
	            
	            {name:"thumbnail",index:"thumbnail",width:300,sortable:true, resizable:true},       
	            {name:"image",index:"image",width:'800',sortable:true, resizable:true  } 
        	],  
        	viewrecords: true,  
        	rowNum: 25,  
        	rowList: [25,50,100],  
        	loadonce: true,
        	jsonReader: {  
            	root:"gridModel",       // (2)  
            	records: "record",      // (3)  
            	repeatitems : false,     // (4)  
        	},  
        	pager: "#gridPager",  
        	caption: "検証状況資料・一覧",  
        	hidegrid: false,
        	toolbar: [false,"top"] ,       
        	rownumbers: true,
        	rownumWidth: 20,
        	shrinkToFit: false,
        	editurl:"errorChildImageManage!Modify.action" ,
        	
        	  loadComplete:function(){
        		 
        		$("#gridTable tr").each(function(){
                     var col1= $(this).find("td:eq(3)");   
                    
                     $(col1).removeAttr("title");  
                     var image= $(this).find("td:last-child").html();
                      $(col1).qtip({
                                  content: image,
                                  position: {
                                     corner: {
                                        tooltip: 'bottomMiddle',
                                        target: 'topMiddle'},
                                     //   adjust: {screen: true}
                                  		} ,
                                    style: {
                                     //tip: true,  
                                     name: 'blue', 
                                     width:'100%',
                                     height:'100%'
                                  }  
                     }); 
                     
                     
                 });
        	}, 
        	
    	}
    	);  	
    	 
 	 	//Frozen 		
 	  	//$("th[role='columnheader']:eq(2)").find("span:first-child").first().after("<span id='lock' class='lock'></span>");
		    $gridTable
		  
 		  //.jqGrid('destroyFrozenColumns')  	  		
 		  //.jqGrid('setColProp','id' , {frozen:true})
		  //.jqGrid('setColProp','oridID' , {frozen:true})
		  //.jqGrid('setColProp','imageID' , {frozen:true})
  	  	  //.jqGrid('setFrozenColumns')
	  	  //.trigger('reloadGrid', [{current:true}])
	  	    .jqGrid('hideCol',["id","image","thumbnail" ,])  ;//"thumbnail""image" 
		
 		
		 
		  //$gridTable.jqGrid('setFrozenColumns');  
 		
  		//调用函数 显示 或者隐藏列
  		//函数位置 js/jqgridHideShowCols.js
  		//showHideColumn("gridTable",3); 
  	  
      	
      	
      	$gridTable.jqGrid('navGrid','#gridPager',
      			{add:false,edit:true,del:false,search:false,refresh:false},
				 
				{height:380,width:480,reloadAfterSubmit:true,
					 beforeShowForm: function(frm) {
						 AddCustomerButtonAtEditPage();  
					 
				        },
      				/*  beforeInitData: function () {
                     var cm = $gridTable.jqGrid('getColProp', 'image');
                     var selRowId = $gridTable.jqGrid('getGridParam', 'selrow');
                     var localRowData = $gridTable.jqGrid('getLocalRow', selRowId);
                     
                     cm.editoptions.src =  localRowData.image;
                        //selRowId = grid.jqGrid('getGridParam', 'selrow');
                    //cm.editoptions.src = ;
                    } , */
				    
				    afterShowForm: function(frm) {
				    	// alert("sss");
						 //AddCustomerButtonAtEditPage();  
						 /* ShowImageAtEditPage(); */
						 var selRowId = $gridTable.jqGrid('getGridParam', 'selrow');
                     	 var localRowData = $gridTable.jqGrid('getLocalRow', selRowId);
                     //	$(localRowData.thumbnail).insertAfter("#finalResult");
						  //$("<img id ='image' />").insertAfter("#finalResult");
				        }
				        
				}, // edit options 
				{height:400,width:400,reloadAfterSubmit:false,
					 beforeShowForm: function(frm) {  
				        }					        
				}, // add options 
				{reloadAfterSubmit:false}, // del options 
				{} // search options 
				);
      	
      	
      	/* $gridTable.jqGrid('navButtonAdd','#gridPager',{ caption: "",title: "列を表示／隠す",
      		onClickButton : function ()	{ jQuery("#gridTable").jqGrid('columnChooser'); }});  */
      	//$gridTable.jqGrid('navGrid','#gridPager',{add:false,edit:true,del:false,search:false,refresh:false});
      	
		//search button格式化
		$("#buttonSearch").button().click(function( event ) {
			$gridTable.jqGrid("setGridParam",{
				url:"errorChildImageManage!refreshGridModel.action?"+ $("#dataForm").serialize(),
    			datatype:'json'
    		}).trigger("reloadGrid", [{page:1}]);				 
			event.preventDefault();				 
		});
	
/* 		  $("th[role='columnheader']").mouseenter(  function(){
 		 	var index = $(this).index();						
			$(".lock").remove();						 			 			
		  	$(this).find("span:first-child").first().after("<span id='lock' class='lock'></span>");
		  	$(this).find("#lock").click(function(){		  		
		  		var cm = $gridTable.jqGrid("getGridParam", "colModel");
		  		for(var i=0;i<cm.length;i++)
		  			$gridTable.jqGrid('setColProp',cm[i].name  , {frozen:false});
		  		$gridTable.jqGrid('destroyFrozenColumns');
		  	  	for(var i=1;i<=index;i++)		  	  
		  	  		$gridTable.jqGrid('setColProp',cm[i].name  , {frozen:true});
		  	  	$gridTable.jqGrid('setFrozenColumns')
		  	  		.trigger('reloadGrid', [{current:true}]);		  	  		  		
		  	});
		}).mouseleave(function(){			
			$(".lock").remove();
	 		   var lockcol=-1;
			$("th[role='columnheader']").find("#lock").remove();			
			var cm = $gridTable.jqGrid("getGridParam", "colModel");
			for(var i=0;i<cm.length;i++)
 				lockcol == cm[i].frozen == true ? i : lockcol;		   			 			
 			$("th[role='columnheader']:eq("+lockcol+")").find("span:first-child").first().after("<span id='lock' class='lock''></span>"); 
		});		  
				 */
		$(window).bind('resize', function() {	    	 	    	 
	 		$("#gridTable").setGridWidth($("#dataForm").width()-5);	    	 
	 		$("#gridTable").setGridHeight ($(window).height()-$("#dataForm").height()-91);	    	 
		}).trigger('resize');	
		
		function AddCustomerButtonAtEditPage()
		{
			 
			if ($("#sData").parent().find("#btnColor") .length == 0)
			{
				$clone= $("#sData").clone();
				$clone.attr('class','-');
				$clone.attr('id','btnColor');
				$clone.attr('name','btnColor');
				$clone.text('色彩');
				$clone.insertBefore("#sData");
			}
			
		 
			
			$(":input").focus(function(){
	             
				 var actid= $(document.activeElement).attr("id"); 
				 $("#btnColor").attr('actid',actid);
				 
				  
				  
				 if( actid.substring(0,5)=='final')
				 {
					 $("#btnColor").attr('color','red');
				 }
				 else
				 {
					 $("#btnColor").attr('color','blue');
				 }
	        });
			
			
			$("#btnColor").button().click(function(){
				
			
				 var actid=  $("#btnColor").attr('actid');
				 var color =   $("#btnColor").attr('color');
				 
				 
			     insertColorAtCaret($("#" + actid ),color); 
					 
					
			});
			
			 
		}
		
		/* function ShowImageAtEditPage()
		{
			   var image=	$('#image').attr('value') ;
				$('#image').attr('src',image);
		} */
		
		function insertColorAtCaret(obj,color){
			var $t=obj[0];
			if (document.selection) {
				/* IE */
				
				
				 this.focus();
				sel = document.selection.createRange();
				
				if (sel.text.length >0)
				{
					var html = "<font color='" + color +"'>" + sel.text + "</font>";				
				 
					this.document.selection.createRange().text = html ;
				}
				this.focus(); 
			}else if($t.selectionStart || $t.selectionStart == '0') {
				
				/* firefox */
				var startPos = $t.selectionStart;
				var endPos = $t.selectionEnd;
				var scrollTop = $t.scrollTop;
			
				if (startPos != endPos){
		 
					//$t.value = $t.value.substring(0, startPos) + myValue + $t.value.substring(endPos, $t.value.length);
					$t.value = 	$t.value.substring(0, startPos) +
								"<font color='" + color +"'>"+
								$t.value.substring(startPos,endPos) +
								"</font>" +
								$t.value.substring(endPos, $t.value.length);
				}
				
				this.focus();
				$t.selectionStart = startPos + myValue.length;
				$t.selectionEnd = startPos + myValue.length;
				$t.scrollTop = scrollTop;
			}else{
				//this.value += myValue;
				this.focus();
			}
			} 
	});
	
</script>
</head>


<body style="font-size:15px;font-weight:400;margin: 0;padding:">

<s:form id="dataForm" theme="simple" >			
	<table style="white-space:nowrap">
		<tr>
		 	<th>  時間帯</th><td ><s:textfield id="dateFrom" name="dateFrom" key="value" label="开始日" cssClass="datebox" /></td>				
			<th>  ～</th><td ><s:textfield id="dateTo" name="dateTo" key="value" label="结束日" cssClass="datebox" /></td>
			<td width=30></td>
			<td><a id="buttonSearch" href="#" id="buttonSearch" class="button" title="My tooltip text" >検索</a></td>
			 
		</tr>
	</table>
</s:form>

<table id="gridTable" style="margin: 0;padding: 0"></table> 
<div id="gridPager" style="height:38px;margin: 0;padding: 0"></div>  	 
 
</body>
</html>